<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta contect="GabrielChen">
    <meta contect="Web Audio API">
    <title>Web Audio API 学习</title>   
    <style>
        body{
            background-color: black;
            color: white;
        }
        #canvasFormAudio {
            border: 1px solid #ddd;
        }
        #canvasCtx{
            border: 1px solid #ddd;    
        }
    </style>
</head>

<body>    
    <audio id="audio" src="./12.mp3" controls="controls">你的浏览器不支持audio标签</audio>
    <h1频域图模仿</h1> <canvas width="400px" height="200px" id="canvasFormAudio"></canvas>
    <canvas id="canvasCtx"></canvas>
    <div style="width:900px;height:700px;border:1px solid #fff">
        <canvas width="900px;" height="700px"></canvas>
    </div>
    <script type="text/javascript">
        var context1;
        var source;
        var analyserfa; 
        var canvasFormAudio; 
        var ctxfa; 
        canvasFormAudio = document.getElementById('canvasFormAudio'); 
        var cav1 = document.getElementById('canvasCtx'); 
        var canvasCtx = cav1.getContext("2d"); 
        ctxfa = canvasFormAudio.getContext("2d"); 
        try { 
            context1 = new (window.AudioContext || window.webkitAudioContext);
        } catch(e) { 
            throw new Error('The Web Audio API is unavailable');
        } 
        analyserfa=context1.createAnalyser(); 
        window.addEventListener('load', function(e) { 
            //init();
            var audio =document.getElementById("audio"); 
            var source = context1.createMediaElementSource(audio); 
            source.connect(analyserfa); 
            analyserfa.connect(context1.destination); 
            drawSpectrumfa();
            drawctx1();
        }, false); 
        function drawSpectrumfa() { 
            var WIDTH = canvasFormAudio.width; 
            var HEIGHT= canvasFormAudio.height; 
            var array = new Uint8Array(128); 
            analyserfa.getByteFrequencyData(array); 
            var g1 = ctxfa.createLinearGradient(0, 0, 0, HEIGHT);
            g1.addColorStop(1, 'rgb(0,255,0)');//绿
            g1.addColorStop(0.7, 'yellow');//绿
            g1.addColorStop(0, 'rgb(255,0,0)'); //红  
            ctxfa.fillStyle = g1;
            ctxfa.clearRect(0, 0, WIDTH, HEIGHT); 
            for ( var i = 0; i < (array.length); i++ ){ 
                var value = array[i]; 　　　　　　　　 
                ctxfa.fillRect(i*5,HEIGHT,3,HEIGHT-value-100); 
            }  
            requestAnimationFrame(drawSpectrumfa); 
        }
        function drawctx1(){
            var WIDTH = cav1.width; 
            var HEIGHT= cav1.height; 
            var array = new Uint8Array(128); 
            analyserfa.getByteFrequencyData(array); 
            var g1 = canvasCtx.createLinearGradient(0, 0, 0, HEIGHT);
            g1.addColorStop(1, 'rgb(0,255,0)');//绿
            g1.addColorStop(0.7, 'yellow');//绿
            g1.addColorStop(0, 'rgb(255,0,0)'); //红  
            canvasCtx.fillStyle = g1;
            canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); 
            for ( var i = 0; i < (array.length); i++ ){ 
                var value = array[i]; 　　　　　　　　 
                canvasCtx.fillRect(i*5,HEIGHT,3,HEIGHT-value); 
            } 
            var bufferLength = analyserfa.fftSize;
            var dataArray = new Uint8Array(bufferLength);
            analyserfa.getByteTimeDomainData(dataArray);
            canvasCtx.fillStyle = 'white';
            //canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
            canvasCtx.lineWidth = 1;
            canvasCtx.strokeStyle = 'red';
            canvasCtx.beginPath();

            var sliceWidth = WIDTH * 1.0 / bufferLength;
            var x = 0;

            for(var i = 0; i < bufferLength; i++) {
   
                var v = dataArray[i] / 128.0;
                var y = v * HEIGHT/2;

                if(i === 0) {
                    canvasCtx.moveTo(x, y);
                } else {
                    canvasCtx.lineTo(x, y);
                }

                x += sliceWidth;
            }

            canvasCtx.lineTo(WIDTH, HEIGHT/2);
            canvasCtx.stroke();
            requestAnimationFrame(drawctx1);
        }
    </script>
</body>
</html>